<template>
    <div class="loginbox">
        <div class="login">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
              >
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="ruleForm.password"
                    type="text"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <el-space>
                        <el-input v-model="ruleForm.captcha" />
                      <div @click="changeCaptchaFn">
                        <img :src="captchaImg" alt="">
                    </div>
                    </el-space>

                  
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm(ruleFormRef)"
                    >登录</el-button
                  >
                  <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
              </el-form>
        </div>
    </div>
    
</template>

<script setup>
    import { reactive, ref } from 'vue'
    import {useRouter} from "vue-router"
//导入接口
import { getcaptcha, loginApi } from '@/api/https'
//定义验证码图片
const captchaImg = ref('')
const key = ref('')

//点击切换验证码
const changeCaptchaFn = () => {
   getcaptcha().then(res => {
        console.log('res', res);
        captchaImg.value = res.data.img
        key.value = res.data.key
    })
}
getcaptcha().then(res => {
    console.log('res', res);
    captchaImg.value = res.data.img
    key.value = res.data.key
})


const ruleFormRef = ref()

//定义的表单提交的数据
const ruleForm = reactive({
    username: '',
    password: '',
    key: '',
    captcha:''
})
//自定表单校验规则
const rules = reactive ({
    username: [{ required:true, message:'请输入用户名',trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})
const router = useRouter()
//提交按钮
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            ruleForm.key = key.value
            loginApi(ruleForm).then(res =>{
                console.log('222',res);
                if (res.data.errNo ==0){
                    //存储信息
                    localStorage.setItem('jwt',res.data.context.jwt)
                    localStorage.setItem('acl', JSON.stringify(res.data.context.acl))
                    //跳转到首页
                    router.push('/dashboard')
                }
            })
            console.log(ruleForm)
        } else {
            console.log('error submit!')
            return false
        }
    })
}
//重置表单
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped lang="scss">
.loginbox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .login{
        width: 400px;
    }
}
</style>